<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gundong6</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#div1 {
			width: 1200px;
			height: 500px;
			margin: 100px auto;
			position: relative;
			background: red;
			overflow: hidden;

		}

		#div1 ul {
			position: absolute;
			left: 0;
			top: 0;
		}

		#div1 ul li {
			float: left;
			list-style: none;

		}

	</style>
	<script>
		window.onload = function () {
			var oDiv = document.getElementById("div1");
			var oUl = oDiv.getElementsByTagName("ul")[0];
			oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
			aLi = oUl.getElementsByTagName("li");
			oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
			function move() {
				if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
					oUl.style.left = "0";
				}
				if (oUl.offsetLeft > 0) {
					oUl.style.left = -oUl.offsetWidth / 2 + "px";

				}
				oUl.style.left = oUl.offsetLeft + 2 + "px";

			}


			var timer = setInterval(move, 30);

			oDiv.onmouseover = function () {
				clearInterval(timer);

			};
			oDiv.onmouseout = function () {
				timer=setInterval(move,30)


			}
		}
	</script>
</head>
<body>
<div id="div1">
	<ul>
		<li><img src="../../img/duo1.png" width="1200px" height="500px"></li>
		<li><img src="../../img/duo2.png" width="1200px" height="500px"></li>
		<li><img src="../../img/duo3.png" width="1200px" height="500px"></li>
		<li><img src="../../img/duo4.png" width="1200px" height="500px"></li>

	</ul>

</div>

</body>
</html>